<template>
    <div class="margin-top-10">
        <Row type="flex" justify="space-between">
            <Row>
                <Input v-model="queryName" @on-enter="searchRecord" placeholder="请输入姓名..."
                       style="width:150px;margin-right:8px"></Input>
                <DatePicker type="datetimerange" v-model="queryDateRange" placeholder="选择时间段" format="yyyy-MM-dd HH:mm"
                            style="width: 300px;margin-right:8px"></DatePicker>
                <Button @click="searchRecord()" type="primary">查询</Button>
                <a href="#" type="primary" style="{color:#000;text-decoration:underline;margin-left: 5px;}"
                   @click="showModal">图片检索</a>
            </Row>
        </Row>

        <Timeline style="background: #ffffff;padding: 30px;margin-top: 10px">
            <TimelineItem v-for="(item,index) in tracks" :key="index">
                <p class="content">{{getContentDescript(item)}}</p>
                <div class="picContent">
                    <img v-for="(pic,index1) in item.rec_capture" :key="index1" :src="pic"/>
                </div>
            </TimelineItem>
        </Timeline>
        <SerachByPic ref="modal" :callback="onSelect"></SerachByPic>
    </div>
</template>

<script>
    import TimeUtils from '@/libs/time.js'
    import ME from '@/controllers/track.js'
    import Uploader from "../weiget/uploader";
    import SerachByPic from './components/serachByPic'

    export default {
        components: {
            Uploader,
            SerachByPic
        },
        name: "",
        data() {
            return {
                tracks: [],
                queryName: "",
                queryDateRange: {},
            }
        },
        created() {

        },
        methods: {
            getContentDescript(item) {
                //TODO 这句话 后面调通删掉
                return `${TimeUtils.convertStr(item.rec_time, 'yyyyMMddHHmmss', 'yyyy-MM-dd HH:mm:ss')} ${item.user_name} 在 ${item.ipc_name}`
            },
            searchRecord(user_avatar) {
                let params;
                if(user_avatar){
                    params = {
                        user_avatar:user_avatar
                    }
                }else{
                    params = {
                        user_name: this.queryName
                    }
                }

                if (this.queryDateRange.length > 1 && this.queryDateRange[0] != null && this.queryDateRange[1] != null) {
                    params.date_from = TimeUtils.getStr(this.queryDateRange[0], 'yyyyMMddHHmmss');
                    params.date_to = TimeUtils.getStr(this.queryDateRange[1], 'yyyyMMddHHmmss');
                }
                ME.loadData(params).then(json => {
                    if (json.code == 0) {
                        this.tracks = json.data
                    }
                })
            },
            showModal() {
                this.$refs['modal'].showIt()
            },
            get_visible_state(state) {
                if (state) {
                    return ''
                } else {
                    return 'none'
                }
            },
            onSelect(imgSrc){
                this.searchRecord(imgSrc)
            }
        }
    }
</script>
<style lang="less">
    @import "../../styles/common.less";
</style>
<style scoped>
    .content {
        font-size: 14px;
        font-weight: bold;
    }

    .picContent {

    }

    .picContent img {
        margin: 10px;
        width: 100px;
        height: 100px;
    }

</style>